<template>
  <div class="container">
    <div class="auto">
      <div class="rule_wrap">
<!--        <div class="crumb">-->
<!--          <span>留言簿</span>-->
<!--          <div class="btns fr">-->
<!--            <a @click="search" class="ann refresh">刷新</a>-->
<!--          </div>-->
<!--        </div>-->
        <div class="message_main">
          <div class="auto1320">
            <a-row class="message_top clearfix">
              <a-col :xl="5" :lg="5" :md="24" :sm="24" class="txt fl">
                <h6 class="title">留言簿</h6>
                <p class="fz">请记录下您的留言吧！</p>
              </a-col>
              <!-- <a-col :xl="14" :lg="11" :md="12" :sm="24" class="fr" style="margin-top: 10px; width: 80%;"> -->
              <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-col :xl="5" :lg="5" :md="24" :sm="24">
                  <a-form-item label="发布时间" :labelCol="labelCol" :wrapperCol="wrapperCol" style="width: 100%;">
                    <a-range-picker v-model="birthdayRange"
                                    style="width: 98%;"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    :placeholder="['开始时间', '结束时间']"
                                    @change="dataChange"/>
                  </a-form-item>
                </a-col>

                <a-col :xl="5" :lg="5" :md="24" :sm="24">
                  <a-form-item label="关键词" :labelCol="labelCol" :wrapperCol="wrapperCol" style="width: 100%;">
                    <a-input placeholder="请输入关键词" v-model="queryParam.keywords"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :xl="4" :lg="4" :md="24" :sm="24" style="margin-left: 10px;">
                  <a-form-item label="">
                    <a-button type="primary" @click="search">查询</a-button>
                    <a-button type="primary" @click="searchReset" style="margin-left:4px;">重置</a-button>
                  </a-form-item>
                </a-col>
                <a-col :xl="4" :lg="4" :md="24" :sm="24" style="margin-right: 10px">
                  <a-form-item label="">
                    <a-button type="primary">
                      <router-link to="/messageBook/addMessageBook">+ 新建留言</router-link>
                    </a-button>
                    <a-button type="primary" @click="search" style="margin-left:4px;" >刷新</a-button>
                  </a-form-item>
                </a-col>
              </a-form>

              <!-- </a-col> -->
            </a-row>
            <a-spin :spinning="confirmLoading">
              <div class="message_bot">
                <div class="message_total">总帖数量：{{total}}</div>
                <ul class="message_list" v-if="articleList.length">
                  <li class="item clearfix" v-for="item in articleList" :key="item.id">
                    <router-link :to="{path: '/messageBook/messageBookDetail', query: {id: item.id}}">
                      <img src="images/icon_24.png" alt="" class="icon"/>
                      <div class="info">
                        <a href="#" class="title ellipsis">{{item.title}}</a>
                        <div class="sm">
                          <span class="fz date">发布于 {{item.createDate}}</span>
                          <span class="fz admin">{{item.email}}</span>
                        </div>
                      </div>
                    </router-link>
                  </li>
                </ul>
                <a-row v-else class="message_list">
                  <div class="no-data">
                    <a-icon type="frown-o"/>
                    暂无数据
                  </div>
                </a-row>
                <a-row v-if="articleList.length > 0" style="margin-top: 10px;">
                  <a-col>
                    <a-pagination
                      style="float: right;"
                      v-model="pageNo"
                      :page-size-options="pageSizeOptions"
                      :total="total"
                      show-size-changer
                      :page-size="pageSize"
                      :showSizeChanger="true"
                      :showQuickJumper="false"
                      :show-total="showTotal"
                      @showSizeChange="onShowSizeChange"
                      @change="currentChage"
                    >
                    </a-pagination>
                  </a-col>
                </a-row>
              </div>
            </a-spin>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '../../../public/css/style.css';
  import {getAction} from '@/api/manage'

  export default {
    name: 'MessageBook',
    beforeRouteEnter(to, from, next) {
      window.scrollTo(0, 0);
      next();
    },
    data() {
      return {
        confirmLoading: false,
        labelCol: {
          xs: {span: 24},
          sm: {span: 7},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 17},
        },
        birthdayRange: null,
        queryParam: {},
        articlType: '1',
        articleList: [],
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        pageNo: 1,
        pageSize: 10,
        total: 50,
      };
    },
    created() {
      this.getArticleList()
    },
    methods: {
      searchReset() {
        this.queryParam = {}
        this.birthdayRange = null
        this.search()
      },
      search() {
        if (!this.queryParam.begintime) {
          delete this.queryParam.begintime
        }
        if (!this.queryParam.endtime) {
          delete this.queryParam.endtime
        }
        if (!this.queryParam.keywords) {
          delete this.queryParam.keywords
        }
        this.getArticleList()
      },
      dataChange(value, dateString) {
        this.queryParam.begintime = dateString[0]
        this.queryParam.endtime = dateString[1]
      },
      onShowSizeChange(pageNo, pageSize) {
        this.pageNo = 1
        this.pageSize = pageSize
        this.getPicList()
      },
      currentChage(page, pageSize) {
        this.pageSize = pageSize
        this.getPicList()
      },
      showTotal(total, range) {
        return range[0] + "-" + range[1] + " 共" + total + "条"
      },
      getArticleList() {
        let self = this
        let params = {
          limit: self.pageSize,
          page: self.pageNo
        }
        this.confirmLoading = true
        params = Object.assign(params, this.queryParam)
        getAction('/messagebook/list', params).then(res => {
          if(res.code == 0) {
            self.articleList = [...res.result.list]
            self.pageNo = res.result.currPage
            self.total = res.result.totalCount
          } else {
            self.$message.error(res.msg)
          }
        }).finally(() => {
          self.confirmLoading = false
        })
      }
    }
  };
</script>

<style lang="less" scoped>
  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }
</style>
